<template>
	<view class="confirmAnOrder">
		<view class="topBack">
			<view class="topOne" @tap="goHarvestAddressList" v-if="addressJson.id">
				<view class="itemLeft">
					<image class="itemImg" :src="addressJson.head"></image>
					<view class="itemLeftRight">
						<text
							class="itemLeftRightTop">{{addressJson.address_name}}{{addressJson.address_details}}</text>
						<text class="itemLeftRightBottom">{{addressJson.consignee}} {{addressJson.phone}}</text>
					</view>
				</view>
				<!-- 			<view class="itemRight" @tap="edisAdressPage(addressJson)">
					<image class="bi"
						src="https://chongwu.aitaoba.net/storage/uploads/20231118/c0f7b4ec52f54c747f58363ac24fbc66.png">
					</image>
				</view> -->
			</view>
			<view class="topOne" @tap="goHarvestAddressList" v-else>
				<view class="topOneLeft">
					<image class="topOneLeftImg"
						src="https://chongwu.aitaoba.net/storage/uploads/20231118/aa37f04c6205eccd89bf43278c3dd657.png">
					</image>
					<text class="topOneLeftText">请选择配送地址</text>
				</view>
				<image class="topOneRight"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/8a1ef58ba09c08e2c382762f0f5a8d14.png">
				</image>
			</view>
			<view class="orderList">
				<view class="orderDiv">
					<text class="orderNum">订单号:{{pageJson.order_sn}}</text>
					<view class="gang"></view>

					<view class="orderCenter" v-for="(item,index) in pageJson.order_goods" :key="index">
						<view class="orderLeftDiv">
							<image class="orderLeftImg" :src="item.image"></image>
							<view class="orderLeftRight">
								<text class="orderLeftRightTop">{{item.title}}</text>
								<text class="orderLeftRightBottom"><text class="qFh">￥</text>
									{{item.goods_price}}</text>
							</view>
						</view>
						<!-- 记数器 -->
						<u-number-box v-model="item.goods_num" :min="1" @change="valChange(item,$event)"></u-number-box>
					</view>
					<view class="merchandiseSubtotal">
						<text class="merchandiseSubtotalTitle">商品小计：</text>
						<text class="orderLeftRightBottom">￥{{pageJson.price}}</text>
					</view>


					<view class="merchandiseSubtotal marginTop8">
						<text class="merchandiseSubtotalTitle">运费：</text>
						<text class="orderLeftRightBottom">￥{{pageJson.freight}}</text>
					</view>
				</view>

			</view>

		</view>
		<view class="confirmAnOrderBottom">
			<text class="hjDiv">合计：￥{{paymentPriceLevel}}</text>
			<button class="zfButton" @tap="paymentFun">立即支付</button>
		</view>
	</view>
</template>

<script>
	import {
		pay
	} from '@/api/index.js'
	export default {
		components: {

		},
		data() {
			return {
				value: 0,
				paytype: '', //结算类型  cart =》 购物车结算 否则直接结算 
				pageJson: {},
				paymentPriceLevel: 0,
				addressJson: {},
			};
		},

		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {

		},

		onLoad(e) {
			console.log(typeof e.pageJson, '11111');
			console.log(e.pageJson, '222222');
			this.pageJson = JSON.parse(decodeURIComponent(e.pageJson));
			this.paymentPriceLevel = parseFloat(this.pageJson.price) + parseFloat(this.pageJson.freight)
			this.addressJson = this.pageJson.address;

			uni.$on('addressItem', (data) => {
				console.log('地址数据', data);
				this.addressJson = data;
				// this.$set(this,'addressJson',data)
				// TODO 下面执行刷新的方法
			})


		},

		watch: {

		},
		methods: {
			paymentFun() {
				console.log(this.pageJson)
				console.log(this.addressJson, 'addressJson')
				if (!this.addressJson) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
				} else {
					// return false
					let data = {
						order_sn: this.pageJson.order_sn,
						address_id: this.addressJson.id,
						goods_info: this.pageJson.order_goods
					};
					pay(data).then((res) => {
						console.log(res, '支付接口')
						if (res.code == 200) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success: function(res) {
									console.log('支付成功');
									uni.navigateTo({
										url: "/pages/myOrder/myOrder"
									})
								},
								fail: function(res) {
									console.log(res);
									console.log('支付失败');
								}
							});
						}

					}).catch((res) => {})
				}

			},
			valChange(item, e) {
				// console.log('当前值为: ' + e.value)
				item.goods_num = e.value;
				// item.goods_price
				// console.log(item.goods_price, '商品单价')
				let price = 0;
				this.pageJson.order_goods.forEach(items => {
					price += (parseFloat(items.goods_price) * parseInt(items.goods_num))
					// console.log(items.goods_num, )
				})

				this.pageJson.price = price.toFixed(2)
				this.paymentPriceLevel = (price + parseFloat(this.pageJson.freight)).toFixed(2)
			},
			goHarvestAddressList() {
				// harvestAddressList
				uni.navigateTo({
					url: "/pages/harvestAddressList/harvestAddressList"
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.confirmAnOrder {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBack {
		width: 750rpx;
		height: 257rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.topOne {
		width: 690rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx 0 32rpx;
		box-sizing: border-box;
	}

	.topOneLeft {
		display: flex;
		align-items: center;
	}

	.topOneLeftImg {
		width: 42rpx;
		height: 50.36rpx;

	}

	.topOneLeftText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #683518;
		margin-left: 19rpx;
	}

	.topOneRight {
		width: 14.66rpx;
		height: 27.06rpx;

	}

	.orderList {
		display: flex;
		flex-direction: column;
	}

	.orderDiv {
		width: 690rpx;
		// height: 365px;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 32rpx 31rpx 29rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.orderNum {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #2E2908;
	}

	.gang {
		width: 100%;
		height: 1rpx;
		background: #D6D6D6;
		margin-top: 19rpx;

	}

	.flexEnd {
		display: flex;
		flex-direction: column;
	}

	.orderCenter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 28rpx;
	}

	.orderLeftDiv {
		display: flex;
		align-items: center;
	}

	.orderLeftImg {
		width: 80rpx;
		height: 80rpx;
	}

	.orderLeftRight {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.orderLeftRightTop {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.orderLeftRightBottom {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #EB1515;
	}

	.qFh {
		font-size: 24rpx;
	}

	.merchandiseSubtotal {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;

	}

	.marginTop8 {
		margin-top: 8rpx;
	}

	.merchandiseSubtotalTitle {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.confirmAnOrderBottom {
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.hjDiv {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #EB1515;
	}

	.zfButton {
		width: 259rpx;
		height: 98rpx;
		background: #FED24C;
		outline: none;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #5D5353;
		// justify-content: center;
		// align-items: center;
		border-radius: 0rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 98rpx;

	}

	.itemLeft {
		display: flex;
		align-items: center;
	}

	.itemImg {
		min-width: 72rpx;
		min-height: 72rpx;
		max-width: 72rpx;
		max-height: 72rpx;
		background: #FAE24E;
		border-radius: 50%;
		border: 1rpx solid #683518;
	}

	.itemLeftRight {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.itemLeftRightTop {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #2E2908;
	}

	.itemLeftRightBottom {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #797873;
		margin-top: 4rpx;
	}

	.itemRight {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.bi {
		width: 30rpx;
		height: 30rpx;
	}
</style>